/**
 * Created by Administrator on 2016/9/28.
 */
(function(){
    $.fn.yhslide = function(ops){
        this.each(function(ins, ele){
            console.log( ele )
            slides(ele, ops)
        })
        return this
    }
    var slides = function(ele, ops){
//    插件的默认设置，即方向、相关作用的标签
        var defs = {
            direction:'left',   // 默认是Left,可选参数:left/top
            speed:1000,
            preClass:'sld-pre',
            nextClass:'sld-next',
            moveClass:'sld-move',
            listClass:'sld-lis'
        }
//    合并默认的设置及用户的设置参数
        var settings = $.extend(defs, ops)
//    使用过程

        var $ele = $(ele),
        //$sldPre = $ele.find( '.' + defs.preClass )
            $sldPre = $( '.' + defs.preClass , $ele),
            $sldNext = $( '.' + defs.nextClass, $ele),
            $sldMove = $( '.' + defs.moveClass, $ele),
            $sldList = $( '.' + defs.listClass, $ele),
            $li = $sldMove.children()

        // 设置初始化样式，Left/top
        var dir = defs.direction
        if( dir == 'left'  ){
            var $len = $li.width()
            $sldMove.css('width', $len * $li.length )
        }
        if( dir == 'top' ){
            var $len = $li.height()
            $sldMove.css('height', $len * $li.length )
        }
//设置运动的对象
        var data1 = {}, data2 = {}
        data1[dir] = -$len
        data2[dir] = 0
//    下一张
        function next(){
            $sldMove.stop(true,true).animate(data1, defs.speed, function(){
                $sldMove.css(data2).children().first().appendTo( $sldMove )
            })
        }
//    上一张
        function pre(){
            $sldMove.css(data1).children().last().prependTo( $sldMove )
            $sldMove.stop(true,true).animate(data2, defs.speed)
        }

//    点击执行
        $sldPre.click(function(){
            pre()
        })
        $sldNext.click(function(){
            next()
        })

    }

})()